<template>
  <el-table
    :data="paginatedList"
    style="width: 100%"
  >
    <el-table-column label="选择" width="55">
      <template #default="scope">
        <el-checkbox v-model="scope.row.state" size="large" @change="checkHandle(scope.$index)"
         :disabled="show !== !scope.row.state"/>
      </template>
    </el-table-column>
    <el-table-column label="编号" width="100">
      <template #default="scope">{{ scope.row.id }}</template>
    </el-table-column>
    <el-table-column label="代办事项" width="220">
      <template #default="scope">{{ scope.row.content }}</template>
    </el-table-column>
    <el-table-column label="创建时间" width="150">
      <template #default="scope">{{ scope.row.startDate }}</template>
    </el-table-column>
    <el-table-column label="完成时间" width="150">
      <template #default="scope">{{ scope.row.finishDate }}</template>
    </el-table-column>
    <el-table-column align="right">
      <template #default="scope">
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    size="small"
    background
    layout="prev, pager, next"
    :total="list.length"
    v-model:current-page="currentPage"
    :page-size="pageSize"
    class="mt-4"
  />
</template>

<script>
import { ElMessageBox } from 'element-plus';

export default {
  props: { list: Array },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      show: false,
    };
  },
  computed: {
    paginatedList() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.list.slice(start, end);
    },
  },
  methods: {
    checkHandle(i) {
      ElMessageBox.confirm('确认完成了吗？', '是否完成', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning',
      })
      .then(() => {
        this.$emit('finish', i);
      });
    },
    handleDelete(i) {
      ElMessageBox.confirm('确认要删除吗？', '是否删除', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning',
      })
      .then(() => {
        this.$emit('del', i);
      });
    },
  },
}
</script>